<template>
	<view class="app-container">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<text class="app-container__title-tip">忘记密码!</text>
		<view class="app-container__item u-padding-30">
			<view class="app-container__item_top  u-padding-left-20 u-padding-right-20 u-margin-top-20">
				<u-form class="app-container__form ">
					<u-form-item left-icon="phone" prop="name">
						<u-input type="number" v-model="smsForm.phone" placeholder="请输入手机号" />
					</u-form-item>
					<u-form-item left-icon="edit-pen" prop="name">
						<u-input placeholder="请输入图形验证码" v-model="smsForm.imageCode" type="number"></u-input>
						<view class="" slot="right">
							<u-image width="200rpx" height="60rpx" :src="imgCodeUrl" @click="getImageCode()"></u-image>
						</view>

					</u-form-item>
					<u-form-item left-icon="email" prop="name">
						<u-input placeholder="请输入验证码" v-model="loginForm.smsCode" type="number"></u-input>
						<text class="app-container__tip price-text" slot="right" @click="getCode">{{ codeText }}</text>

					</u-form-item>
					<u-form-item left-icon="lock" prop="name">
						<u-input type="string" v-model="loginForm.newPassword" placeholder="请输入新密码(6位数,数字加字母组合)" />
					</u-form-item>
					<u-form-item left-icon="lock" prop="name" :border-bottom="false">
						<u-input type="string" v-model="psd2" placeholder="请再次输入密码" />
					</u-form-item>
				</u-form>
			</view>


			<view class="u-margin-top-40">
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>

				<u-button type="primary" :custom-style="customStyle" class="mt-40 " @click="submit">确认</u-button>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF'
				},
				smsForm: {
					imageCode: null,
					imageCodeId: null,
					phone: null,
					phoneCode: "",
					smsType: "FORGOT_PASSWORD"
				},
				loginForm: {
					phone: null,
					smsCode: null,
					newPassword: null
				},
				imgCodeUrl: "",
				psd2: null,

				codeText: "",

			};
		},
		mounted() {
			console.log("code")

			this.getImageCode();
		},
		methods: {
			getImageCode() {
				this.smsForm.imageCodeId = new Date().getTime();
				this.imgCodeUrl = "http://118.31.238.190:9092/agent-api/common/getImageCode/" + this.smsForm.imageCodeId;

			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				const _self = this;
				if (this.$refs.uCode.canGetCode) {
					if (_self.smsForm.phone === null) {
						this.$zx.msg("手机号不能为空");
						return;
					}
					if (_self.smsForm.imageCode === null) {
						this.$zx.msg("图形验证码不能为空");
						return;
					}

					uni.showLoading({
						title: "正在获取验证码",
						mask: true,
					});
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
					_self.$zx.user_api.sendVerifyCodeSms(_self.smsForm).then((data) => {
						console.log("data=" + data)
						uni.hideLoading();
						this.$refs.uToast.show({
							title: "验证码已发送",
							type: "success",
						});
						//组件倒计时
						this.$refs.uCode.start();
					});


				} else {
					this.$u.toast("倒计时结束后再发送");
				}
			},
			submit() {
				const _self = this;
				if (_self.smsForm.phone === null) {
					this.$zx.msg("手机号不能为空");
					return;
				}
				if (_self.smsForm.imageCode === null) {
					this.$zx.msg("图形验证码不能为空");
					return;
				}
				if (_self.loginForm.smsCode === null) {
					this.$zx.msg("验证码不能为空");
					return;
				}
				if (_self.loginForm.newPassword === null) {
					this.$zx.msg("密码不能为空");
					return;
				}
				if (_self.psd2 === null) {
					this.$zx.msg("密码不能为空");
					return;
				}
				_self.loginForm.phone = _self.smsForm.phone;

				this.$zx.user_api.forgetPassword(_self.loginForm).then((data) => {
					console.log("data=" + JSON.stringify(data))
					uni.navigateBack({
						delta: 1,
					});

				});
			}
		},
	};
</script>
<style>
	page {
		background-color: white;
	}
</style>
<style scoped lang="scss">
	.app-container {
		padding: 30rpx;
		position: relative;


		&__title-tip {
			font-size: 46rpx;
		}

		&__item {
			border: 1rpx solid #f6f6f6;
			border-radius: 20rpx;
			margin: 100rpx 30rpx;

			box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
		}

		&__item_top {
			border-radius: 20rpx;
			border: 1rpx solid #f6f6f6;
		}

		&__form {}

		&__codeImage {
			width: 200rpx;
			height: 100rpx;
		}

	}
</style>